<template>
  <div>
      <p @click='zhefan'>|||</p>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      :collapse="zhedie"
    >
      <el-submenu
      v-for="(item,index) in cl"
      :key='item.id'
       :index="item.id+''">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item
        v-for="it in item.children"
        :key='it.id'
         :index="'/'+it.path">
          <i class="el-icon-menu"></i>
          <span slot="title">{{it.authName}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
    data(){
        return{
            cl:[],
            zhedie:false

        }
    },
    mounted(){
       this.getdata()
    },
    methods:{
        zhefan(){
           this.zhedie=!this.zhedie
           this.$emit('zb', this.zhedie);
        },
        getdata(){
            this.$axios.get('menus')
            .then(res=>{
                console.log(res,111);
                if(res.meta.status==200){
                    this.cl=res.data
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
p{
    text-align: center;
}
</style>
